<template>
  <div class="search-nav">
    <el-row>
      <el-form
        :inline="true"
        :model="formInline"
        class="form-inline"
        label-width="100px"
      >
        <el-col :span="24">
          <el-form-item label="所属管廊：" class="inputDeep">
            <el-select
              v-model="formInline.pipeId"
              class="m-2"
              placeholder="--请选择--"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.pipeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属仓室：" class="inputDeep inputOnly">
            <el-select
              v-model="formInline.storehouseId"
              class="m-2"
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in Warehouse"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="防火分区：" class="inputDeep inputOnly">
            <el-select
              v-model="formInline.subregionId"
              class="m-2"
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in partition"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="设备名称：" class="inputDeep">
            <el-input
              class="innerInput"
              v-model="formInline.equipmentName"
              placeholder="请输入..."
              size="large"
              input-style
            />
          </el-form-item>
          <el-form-item label="监控项：" class="inputDeep">
            <el-input
              class="innerInput"
              v-model="formInline.monitoringItem"
              placeholder="请输入..."
              size="large"
              input-style
            />
          </el-form-item>
        </el-col>
        <el-form-item>
          <div class="btns">
            <div class="searchBtn" @click="onSubmit">
              <span class="btnFont">查询</span>
            </div>
            <div class="clearBtn" @click="onClear">
              <span class="btnFont">清空</span>
            </div>
          </div>

          <!-- <el-button type="primary"  @click="onSubmit">查询</el-button> -->
          <!-- <el-button type="success" @click="onClear">清空</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref, defineEmits } from 'vue'
import {
  commonPipeNameDrop,
  commonsubregionIdDrop,
  commonwarehouseIdDrop
} from '@/api/back.js'

const formInline = reactive({
  equipmentName: '',
  monitoringItem: '',
  pipeId: '',
  storehouseId: '',
  subregionId: ''
})
const options = ref([])
const Warehouse = ref()
const partition = ref()
const emits = defineEmits(['onSearch'])
const onSubmit = () => {
  emits('onSearch', formInline)
}
const onClear = () => {
  formInline.equipmentName = ''
  formInline.monitoringItem = ''
  formInline.pipeId = ''
  formInline.storehouseId = ''
  formInline.subregionId = ''
  emits('onSearch', formInline)
}
const list = async () => {
  options.value = await commonPipeNameDrop()
  Warehouse.value = await commonwarehouseIdDrop()
  partition.value = await commonsubregionIdDrop()
}
list()
</script>

<style lang="scss" scoped>
.form-inline {
  width: 100%;
  position: relative;
  column-gap: 20px;
  // padding-bottom: 15px;
  :deep(.el-form-item) {
    margin-right: 10px !important;
  }
  .btns {
    // position: absolute;
    // right: 0;
    // top: 4px;
    display: flex;
    // margin-right: 0px !important;
    margin-left: 150px;
    margin-top: 6px;
    .searchBtn {
      position: relative;
      width: 100px;
      height: 36px;
      background: #1e6ae7;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #8bb7ff;
      cursor: pointer;
      .btnFont {
        position: absolute;
        font-size: 16px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        top: -3px;
        left: 29px;
      }
    }
    .clearBtn {
      position: relative;
      width: 100px;
      height: 36px;
      background: #35b15c;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #8ce6a8;
      cursor: pointer;
      margin-left: 31px;
      .btnFont {
        position: absolute;
        font-size: 16px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        top: -3px;
        left: 29px;
      }
    }
  }
}
:deep(.el-input__inner) {
  width: 247px !important;
}
</style>
